<template>
  <div style="padding: 20px 20px 0px 20px">
<!--    头-->
    <div>
      <el-form :inline="true" :model="grouperInput" class="demo-form-inline">
        <span style="font-size: 35px">团长管理</span>
        <el-form-item style="float: right;margin-top: 8px">
          <el-button type="primary" @click="add = true">添加团长</el-button>
        </el-form-item>
        <el-form-item style="float: right;margin-top: 8px">
          <el-button type="primary" @click="get">查询</el-button>
        </el-form-item>
        <el-form-item style="float: right;margin-top: 8px">
          <el-input v-model="grouperInput.uname" placeholder="绑定用户名称"></el-input>
        </el-form-item>
        <el-form-item style="float: right;margin-top: 8px">
          <el-input v-model="grouperInput.name" placeholder="团长名称"></el-input>
        </el-form-item>
        <el-select v-model="grouperInput.status" placeholder="团长状态" clearable
                   style="float: right;margin-top: 8px; margin-right: 10px">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form>
    </div>
<!--    表格-->
    <el-table
        :data="grouperData"
        style="width: 100%;"
        :show-overflow-tooltip="false"
        height="792"
        :border="true">
      <el-table-column
          prop="uname" label="绑定用户" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
          prop="name" label="团长名称" :show-overflow-tooltip="true">
      </el-table-column>

      <el-table-column
          prop="withdrawal_profit" label="可提现金额" :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
          prop="previous_withdrawal_time" label="提现时间(最后)" :show-overflow-tooltip="true" :formatter="getdate">
      </el-table-column>
      <el-table-column
          prop="previous_withdrawal_money" label="提现金额(最后)" :show-overflow-tooltip="true" >
      </el-table-column>
      <el-table-column
          prop="status" label="状态" :show-overflow-tooltip="true" :formatter="getstatus">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="alterGrouper(scope.$index, scope.row)">正常/撤销</el-button>
          <!--          <el-button-->
          <!--              size="mini"-->
          <!--              @click="handleEdit(scope.$index, scope.row)">删除</el-button>-->
        </template>
      </el-table-column>

    </el-table>
<!--    分页-->
    <el-pagination
        background
        layout="prev, pager, next"
        @current-change="page"
        :page-size="grouperPage.size"
        :total="grouperPage.total"
        style="margin-top: 10px;">
    </el-pagination>
    <!--  添加团长-->
    <el-dialog
        :visible.sync="add"
        width="30%"
        :before-close="addDataClose"
        style="text-align: center">
      <el-form label-width="80px" :model="addGroupData">
        <el-form-item label="用户">
          <el-input v-model="addGroupData.mobile" placeholder="关联用户联系方式"></el-input>
        </el-form-item>
        <el-form-item label="团长名称">
          <el-input v-model="addGroupData.name" placeholder="  团长名称"></el-input>
        </el-form-item>
        <el-button type="primary" plain
                   style="width: 150px;height: 50px ;font-size: 25px;"
                   @click="addGroup">添加团长</el-button>
      </el-form>

    </el-dialog>
  </div>

</template>

<script>
import as from "@/axios/axios";

export default {
name: "Grouper",
  created(){
    this.getgrouper()
  },
  data(){
  return {
    add:false,
    grouperInput:{},
    grouperData:[],
    addGroupData:{},
    grouperPage:{total:1,pages:1,size:14},
    options:[
        {value: 0, label: '撤销'},
        {value: 1, label: '正常'}
    ],
  }
  },
  methods:{
  getgrouper(){
    as.post("/grouper/getGrouper",{
      community: localStorage.getItem("community"),
      name:this.grouperInput.name,
      uname:this.grouperInput.uname,
      status:this.grouperInput.status,
      current:this.grouperPage.pages,
      size:this.grouperPage.size
    }).then((res)=>{

      console.log(res)
      this.grouperData = res.data.data.records
      this.grouperPage.total = res.data.data.total
    })
  },
  //查询
  get(){
    this.getgrouper()
  },
  getstatus(row, column, cellValue, index){
    if(cellValue==1){

      return "正常"
    }else {

      return "撤销"
    }
  },
  getdate(row, column, cellValue, index){
    if(cellValue==null){
      return cellValue
    }
    let i = cellValue * 1000
    let date = new Date(cellValue * 1000)

    /* 年 */
    let year = date.getFullYear();
    /* 月 */
    let month = date.getMonth() + 1;//外国的月份是从0开始的所以要加1
    /* 日 */
    let dd = date.getDate();
    /* 星期 */
    let week = date.getDay();
    /* 时 */
    let hour = date.getHours();
    /* 分 */
    let miunte = date.getMinutes();
    /* 秒 */
    let second = date.getSeconds();

    return year+"-"+month+"-"+dd+" "+hour+":"+miunte+":"+second
  },

  alterGrouper(index ,row){
    console.log(row.id)
    as.post("/grouper/alter",{id:row.id}).then((res)=>{
      console.log(res)
      this.getgrouper()
    })

  },
  page(i){
    this.grouperPage.pages = i
    this.communityGet()

  },
  addGroup(){
    as.post("/grouper/addGrouper", {
      mobile:this.addGroupData.mobile,
      community:localStorage.getItem("community"),
      name:this.addGroupData.name}).then((res)=>{
      console.log(res)
      this.getgrouper()
      this.addGroupData = {}
      this.add = false
    })
  },
  addDataClose(done){
    this.addGroupData = {}
    done()
  }

  },

}
</script>

<style scoped>

</style>